<template>
  <div>
    <!-- 按钮 -->
    <el-row>
      <el-col :span="12">
        <el-button type="danger" @click="deleteAllClk">批量删除</el-button>
        <el-button type="primary" @click="seckilItem">新增秒杀商品</el-button>
      </el-col>
    </el-row>

    <!-- table表格 -->
    <el-table
      :data="rulesArr"
      @selection-change="handleSelectionChange"
      max-height="400"
      stripe
      border
      style="width: 100%;margin-top:10px"
    >
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column type="index" label="#" width="50"></el-table-column>
      <el-table-column prop="time" label="时间" sortable width="180"></el-table-column>
      <el-table-column prop="sids" label="商品集合" width="180">
        <template slot-scope="scope">
          <el-button @click="examine(scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="openDrawer(scope.row)" type="text" size="small">修改</el-button>
          <el-button @click="deleteClk(scope.row.id)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 抽屉 -->
    <el-drawer :title="title" size="45%" :visible.sync="drawer" :before-close="handleClose">
      <!-- form表单 -->
      <el-form ref="form" style="padding-right:10%" :model="form" label-width="80px">
        <el-form-item label="时间" required>
          <el-col :span="11">
            <el-form-item>
              <el-date-picker
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                v-model="form.time1"
                style="width: 100%;"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item>
              <el-time-select
                placeholder="选择时间"
                :picker-options="{
                start: '00:00',
                step: '01:00',
                end: '24:00'
                }"
                v-model="form.time"
                style="width: 100%;"
              ></el-time-select>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item>
          <div class="context">
            <div class="box" v-for="(item,index) in shoopsArr" :key="index">
              <el-image
                v-if="shoopsArr.length"
                style="width: 150px; height: 75px"
                :src="item.imgurl"
                fit="fit"
              ></el-image>
              <div>
                <p>{{item.title}}</p>
                <el-button
                  :type="idsArr.includes(item.id)? 'danger' :'success'"
                  size="mini"
                  :icon="idsArr.includes(item.id)? 'el-icon-delete':'el-icon-check' "
                  circle
                  @click="addIds(item.id)"
                ></el-button>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="cancelClk">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-dialog title="商品展示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="context">
        <div class="box" v-for="(item,index) in showArr" :key="index">
          <el-image
            v-if="shoopsArr.length"
            style="width: 150px; height: 75px"
            :src="item.imgurl"
            fit="fit"
          ></el-image>
          <div>
            <p>{{item.title}}</p>
            <el-button
              :type="idsArr.includes(item.id)? 'danger' :'success'"
              size="mini"
              :icon="idsArr.includes(item.id)? 'el-icon-delete':'el-icon-check' "
              circle
              @click="addIds(item.id)"
            ></el-button>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      title: "新增",
      drawer: false,
      form: {},
      shoopsArr: [],
      idsArr: [],
      showArr: [],
      dialogVisible: false,
      allData: [],
    };
  },
  async mounted() {
    await this.getList();
    let r = await this.getshoops();
    this.shoopsArr = r.data;
  },
  methods: {
    ...mapActions("rules", ["getList", "postRules", "delRules"]), //渲染classify
    ...mapActions("details", {
      getshoops: "getList",
    }),
    openDrawer(item) {
      this.idsArr = JSON.parse(item.sids);
      this.form = { ...item };
      this.form.time1 = item.time.substr(0, 10);
      this.form.time = item.time.substr(10);
      console.log(this.form);
      this.drawer = true;
    },
    // 查看详情
    async examine(item) {
      this.dialogVisible = true;
      let ids = JSON.parse(item.sids).join(",");
      let r = await this.getshoops({ ids: ids });
      this.showArr = r.data;
    },
    deleteAllClk() {
      console.log(this.allData);
      let ids = [];
      this.allData.forEach((v) => {
        ids.push(v.id);
      });
      console.log(ids);
      this.delRules({ id: ids.join(",") });
      if (ids.length) {
        this.$message({
          message: "恭喜你，删除成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "请选择要删除的项",
        });
      }
    },
    //删除
    deleteClk(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.delRules({ id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(id);
      // this.delRules({ id });
      // this.$message({
      //   message: "恭喜你，删除成功",
      //   type: "success",
      // });
    },
    // 多选
    handleSelectionChange(e) {
      this.allData = e;
    },
    //确认
    async onSubmit() {
      if (this.form.id) {
      } else {
        this.$message({
          message: "恭喜你，新增成功",
          type: "success",
        });
      }
      await this.postRules({
        id: this.form.id,
        time: this.form.time1 + "--" + this.form.time,
        sids: JSON.stringify(this.idsArr),
      });
      this.drawer = false;
      this.idsArr = [];
      this.form = {};
    },
    //关闭抽屉
    cancelClk() {
      this.$confirm("您确定要关闭么???")
        .then(() => {
          this.drawer = false;
          this.form = {
            author: "situ",
          };
        })
        .catch(() => {});
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    async seckilItem() {
      this.idsArr = [];
      this.form = {};
      this.drawer = true;
    },
    imgFn(url) {
      return require(url);
    },
    addIds(id) {
      if (this.idsArr.includes(id)) {
        this.idsArr = this.idsArr.filter((v) => v != id);
      } else {
        this.idsArr.push(id);
      }
    },
  },

  computed: {
    ...mapState("rules", ["rulesArr"]),
  },
};
</script>

<style scoped>
p {
  margin: 0;
  padding: 0;
  width: 150px;
  font-size: 12px;
  line-height: 20px;
}

.box {
  width: 150px;
  display: flex;
  flex-direction: column;
}

.context {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 500px;
  overflow: hidden;
  overflow-y: auto;
}
</style>
